import { createApp } from "vue";
// 注：因为项目中不需要用到这个样式表文件，所以在此处把它注释↓
// import './style.css'
import App from "@/App.vue";
// 以插件的形式引入UI组件库“Element Plus”及其样式文件↓
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
// 注：开启“暗黑模式”时需要用到这个样式文件↓
import 'element-plus/theme-chalk/dark/css-vars.css'
// 导入Element Plus的语言配置文件（中文）↓
// 注：由于Element官方没有为语言配置文件提供“类型声明文件”，所以在导入“中文语言包”之前需要添加代码“@ts-ignore”以让TS忽略“类型检查”（注：这是一个“坑”。如果不添加这行代码，那么后续运行命令“npm run build”时终端会报错）↓
// @ts-ignore
import zhCn from "element-plus/es/locale/lang/zh-cn";
// 导入Pinia实例↓
import pinia from "@/store";
// 导入SVG图标插件↓
// @ts-ignore
import 'virtual:svg-icons-register'
// 注：因为这样一个个导入全局组件的做法太麻烦了，所以此处把下面的这一行代码注释掉，改为在自定义插件对象中导入全局组件，在此处安装“自定义插件对象”，通过这种方式来间接地导入全局组件↓
// @ts-ignore
// import svgIcon from '@/components/svgIcon/index.vue'
/* 注：在此处，“文心快码”解释了“@ts-ignore”的含义和作用：
    1. “@ts-ignore”的含义：@ts-ignore 是 TypeScript 的一个特殊注释，用于告诉 TypeScript 编译器忽略下一行代码的类型检查错误。^[1]^ 这通常用于在开发过程中临时绕过类型检查问题，或者是在使用第三方库时，库本身没有提供完整的类型声明文件（TypeScript 类型定义）。
    2. “@ts-ignore”的作用：2.1 临时绕过类型检查错误：在开发过程中，有时会遇到一些类型检查错误，但出于某些原因（如紧急修复、临时调整等），您可能希望暂时忽略这些错误。这时，可以使用 @ts-ignore 来告诉 TypeScript 编译器忽略这些错误。2.2 解决第三方库的类型声明问题：当您使用第三方库时，如果该库没有提供完整的类型声明文件，或者类型声明文件与您的代码不兼容，那么在使用该库时可能会出现类型检查错误。在这种情况下，您可以使用 @ts-ignore 来忽略这些错误，以便继续开发。
    3. 在用户代码中的应用：在用户提供的代码（指“// @ts-ignore
       import zhCn from "element-plus/es/locale/lang/zh-cn";”）中，@ts-ignore 被用于导入 Element Plus 的中文语言包时。由于 Element Plus 的官方没有为语言配置文件提供类型声明文件，所以在导入中文语言包时会出现类型检查错误。通过添加“@ts-ignore”，用户告诉 TypeScript 编译器忽略这个错误，从而能够继续开发。这段代码表示 TypeScript 编译器将忽略“import zhCn from "element-plus/es/locale/lang/zh-cn";”这行代码的类型检查错误。
    4. 注意事项：虽然 @ts-ignore 可以解决一些问题，但它应该谨慎使用。因为它会绕过 TypeScript 的类型检查，可能会导致潜在的运行时错误。如果可能的话，最好解决类型检查错误的原因，而不是简单地忽略它们。↑ */
// 导入“自定义插件对象”（这个插件对象被用于导入整个项目的“全局组件”）↓
// import globalComponent from "@/components/index.ts";
import globalComponent from "@/components";
console.log(globalComponent) // {install: ƒ}
// createApp(App).mount("#app");
// 创建应用程序实例对象↓
const app = createApp(App);
// 把SVG图标组件注册为全局组件↓
// app.component('svgIcon', svgIcon)
// 把UI组件库“Element Plus”以插件的形式添加到应用程序实例对象上（即“安装Element Plus”）↓
app.use(ElementPlus, {
    locale: zhCn, // 设置语言为中文
});
// 安装“自定义插件对象”（即“安装全局组件”）↓
app.use(globalComponent);
// 安装Pinia实例↓
app.use(pinia)
// 导入这个项目的全局样式文件↓
import "@/styles/index.scss"
// 注：下面的这一行代码是测试代码，它被用于测试“mock接口是否可以正常使用”↓
/* import axios from "axios";
axios({
    url:'/api/user/login',
    method:'post',
    data:{
        username:"admin",
        password:"111111",
    }
}) */
// 导入路由器对象↓
import router from "@/router";
// 把路由器对象安装到应用程序实例对象上（即注册路由器）↓
app.use(router);
// 导入路由鉴权文件↓
import "@/permission";
// 导入自定义指令文件↓
import {ifTheUserHaveThisButton} from '@/directive/has'
ifTheUserHaveThisButton(app)
// 把应用程序实例对象挂载到挂载点（即“index.html”中“id”为“app”的“div”元素）上↓
app.mount("#app");